<script setup>
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import request from "@/utils/request.js"
import { ElMessage, ElMessageBox } from "element-plus"
import { useUserStore } from '@/stores/user'

// 图标
import ZL from "@/assets/icons/档案.svg"
import SC from "@/assets/icons/我的订阅.svg"
import DZ from "@/assets/icons/定位.svg"
import DD from "@/assets/icons/历史.svg"
import WZ from "@/assets/icons/文本.svg"
import TC from "@/assets/icons/退出登录.svg"

const router = useRouter()
const userStore = useUserStore()
const emit = defineEmits(["update"])

// 初始化用户数据
const user = ref(null)

// 检查登录状态并初始化用户信息
const initUserInfo = () => {
  const userInfo = JSON.parse(localStorage.getItem('user') || 'null')
  if (!userInfo) {
    router.push('/login')
    return
  }
  
  user.value = userInfo
  // 同步到Pinia
  userStore.setUser(userInfo)
}

onMounted(() => {
  initUserInfo()
})

const update = () => {
  emit('update')
}

// 优化退出登录功能
const logout = async () => {
  try {
    // 先显示确认对话框，等待用户确认
    await ElMessageBox.confirm('确定要退出登录吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      closeOnClickModal: false,
      closeOnPressEscape: false,
      closeOnHashChange: false
    })
    
    // 用户已确认，执行退出登录操作
    try {
      // 调用后端退出登录接口
      await request.post('/logout', { userId: user.value.id })
    } catch (error) {
      console.error('退出登录接口调用失败:', error)
      // 即使接口调用失败，也继续执行前端登出逻辑
    }
    
    // 清除本地存储
    localStorage.removeItem('user')
    localStorage.removeItem('token')
    
    // 清除Pinia状态
    userStore.logout()
    
    ElMessage.success('退出登录成功')
    update()
    
    // 登出成功后再跳转到首页
    router.replace('/')
  } catch (error) {
    // 用户取消退出操作
    console.log('用户取消退出', error)
  }
}

// 处理菜单项点击
const handleSelect = (index) => {
  // // 如果是退出登录选项，则不进行路由跳转
  // if (index === 'logout') {
  //   logout()
  //   return false // 阻止默认的路由行为
  // }
  
  // // 正常路由跳转
  // router.push(index)
}
</script>

<template>
  <el-container style="width: 90%;height: calc(100vh - 100px); margin: 0 auto;">
    <el-aside width="250px" style="border-left: #aeb1b6 1px solid;">
      <el-menu 
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        @select="handleSelect"
        router
        style="height: 100%;"
      >
        <el-menu-item index="/personal/info">
          <el-icon><ZL/></el-icon>
          个人资料
        </el-menu-item>
        <el-menu-item index="/personal/favorites">
          <el-icon><SC/></el-icon>
          收藏夹
        </el-menu-item>
        <el-menu-item index="/personal/address">
          <el-icon><DZ/></el-icon>
          收货地址
        </el-menu-item>
        <el-menu-item index="/personal/orders">
          <el-icon><DD/></el-icon>
          我的订单
        </el-menu-item>
        <el-menu-item index="/personal/myarticle">
          <el-icon><WZ/></el-icon>
          我的文章
        </el-menu-item>
        <el-menu-item @click="logout">
          <el-icon><TC/></el-icon>
          退出登录
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-main style="padding: 0; width: 100%;height: calc(100vh - 100px);">
      <RouterView @update="update" />
<!--      <router-view></router-view>-->
    </el-main>
  </el-container>

</template>

<style scoped>
/* 添加深度选择器修改菜单项样式 */
:deep(.el-menu-item) {
  font-size: 18px;
  height: 80px;
  line-height: 50px;
}
</style>